<!DOCTYPE html>
<html>

<head>
    <title>Vue.js github commits example</title>
    <style>
        #demo {
            font-family: 'Helvetica', Arial, sans-serif;
        }
        
        a {
            text-decoration: none;
            color: #f66;
        }
        
        li {
            line-height: 1.5em;
            margin-bottom: 20px;
        }
        
        .author,
        .date {
            font-weight: bold;
        }
    </style>
    <!-- Delete ".min" for console warnings in development -->
    <script src="../../dist/vue.min.js"></script>
</head>

<body>
    <div id="demo">
        <h1>Latest Vue.js Commits</h1>
        <template v-for="branch in branches">
        <input type="radio"
          :id="branch"
          :value="branch"
          name="branch"
          v-model="currentBranch">
        <label :for="branch">{{ branch }}</label>
      </template>
        <p>vuejs/vue@{{ currentBranch }}</p>
        <ul>
            <li v-for="record in commits">
                <a :href="record.html_url" target="_blank" class="commit">{{ record.sha.slice(0, 7) }}</a> - <span class="message">{{ record.commit.message | truncate }}</span><br> by <span class="author"><a :href="record.author.html_url" target="_blank">{{ record.commit.author.name }}</a></span>                at <span class="date">{{ record.commit.author.date | formatDate }}</span>
            </li>
        </ul>
    </div>
    <script src="mock.js"></script>
    <script src="app.js"></script>
</body>

</html>